
<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 16:29:52
 * @LastEditTime : 2021-09-10 10:21:45
 * @FilePath     : /newhope/src/components/polarResearch/index.vue
 * @Description  : 
-->


<script lang='ts' setup>
import PolarResearch from '/@/assets/images/title/polarResearch.png'
import { Title, Message, Gamge } from '/@/components'
import { useGo } from '/@/hooks/go'
import { withDefaults, onMounted, onUnmounted } from 'vue'
import { PageProps } from '/@/page/gameSuccess/define'
import { useClound } from './hook/useClound'
import { mikeChange, mikeClear, clearMikeNum } from '/@/utils/mikeChange'
const [go] = useGo()
const props = withDefaults(defineProps<{ status: number }>(), {
	status: 2
})
const mikeList = useClound()
let timer: number = 0
onMounted(() => {
	if (props.status === 2)
		// @ts-ignore
		timer = setTimeout(() => {
			go({ name: 'gameSuccess', query: { num: clearMikeNum(mikeList.value).toString() } as PageProps })
		}, 20000)
})
onUnmounted(() => {
	if (props.status === 2)
		clearTimeout(timer)
})
function onClickMike(res: { index: number, total: number }) {
	mikeList.value = mikeChange(mikeList.value, res.index)
	if (mikeClear(mikeList.value)) {
		go({ name: 'gameSuccess', query: { num: clearMikeNum(mikeList.value).toString() } as PageProps })
	}
}

</script>
<template>
	<div class="polarResearch">
		<img src="../../assets/images/bkg/polarResearch.png" class="bkg pulsate-bck" />
		<Title :src="PolarResearch" v-if="props.status === 2" />
		<Message v-else />
		<Gamge @on-mike-click="onClickMike" v-if="props.status === 2" :list="mikeList" />
	</div>
</template>


<style lang="scss" scoped>
.pulsate-bck {
	user-select: none;
	-webkit-animation: pulsate-bck 1.5s ease-in-out infinite both;
	animation: pulsate-bck 1.5s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-bck {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.99);
		transform: scale(0.99);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes pulsate-bck {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.99);
		transform: scale(0.99);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.polarResearch {
	user-select: none;
	position: relative;
	height: 100%;
	width: 100%;
	// background: url("../../assets/images/bkg/polarResearch.png");
	// background-size: 100% 100%;
	// background-repeat: no-repeat;
	.bkg {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}
}
</style>

